import React, { useState ,useImperativeHandle,forwardRef} from 'react';
import { Tree,Tooltip, } from 'antd';
import data from "../data/dataList.json";
import Icon from "@ant-design/icons";

const { TreeNode } = Tree;
// const treeData = [
//     {
//       title: '0-0',
//       key: '0-0',
//       children: [
//         {
//           title: '0-0-0',
//           key: '0-0-0',
//           children: [
//             {
//               title: '0-0-0-0',
//               key: '0-0-0-0',
//             },
//             {
//               title: '0-0-0-1',
//               key: '0-0-0-1',
//             },
//             {
//               title: '0-0-0-2',
//               key: '0-0-0-2',
//             },
//           ],
//         },
//         {
//           title: '0-0-1',
//           key: '0-0-1',
//           children: [
//             {
//               title: '0-0-1-0',
//               key: '0-0-1-0',
//             },
//             {
//               title: '0-0-1-1',
//               key: '0-0-1-1',
//             },
//             {
//               title: '0-0-1-2',
//               key: '0-0-1-2',
//             },
//           ],
//         },
//         {
//           title: '0-0-2',
//           key: '0-0-2',
//         },
//       ],
//     },
//     {
//       title: '0-1',
//       key: '0-1',
//       children: [
//         {
//           title: '0-1-0-0',
//           key: '0-1-0-0',
//         },
//         {
//           title: '0-1-0-1',
//           key: '0-1-0-1',
//         },
//         {
//           title: '0-1-0-2',
//           key: '0-1-0-2',
//         },
//       ],
//     },
//     {
//       title: '0-2',
//       key: '0-2',
//     },
//   ];


const loop = (data, type = "catalog") => {
  return data.map((item) => {
    let pp;
    if (type === "catalog") {
      pp = (
        <span className="catalog-name">
          {
            <Tooltip
              placement="topLeft"
              title={`${item.name}(${item.resourceSum || 0})`}
            >
              <span>{`${item.name}`}</span>
             
              
            </Tooltip>
          }
          <p className="catalog-resource-count">{`(${
            item.resourceSum || 0
          })`}</p>
        </span>
      );
    } else {
      pp = (
        <span nodeType="know" className="catalog-name">
          <Icon style={{ marginRight: "10px" }} type="star" />
          {
            <Tooltip
              placement="topLeft"
              title={`${item.knowledgePointName}(${item.resourceSum || 0})`}
            >
              <span>{`${item.knowledgePointName}(${item.resourceSum})`}</span>
              
              
            </Tooltip>
          }
        </span>
      );
    }
    if (item.children) {
      return (
        <TreeNode title={pp} key={item.id} dataRef={item} isLeaf={item.leaf}>
          {loop(item.children)}
        </TreeNode>
      );
    }
    if (item.pointList && item.pointList.length > 0) {
      
      item.pointList = item.pointList.map((node) => {
        return { ...node, parentCatalogId: item.id };
      });

      if (type == "catalog") {
        //pp = <span className="catalog-name">{`${item.name}(${item.resourceSum})`}<Icon style={{marginLeft:'10px'}} type="star" /></span>

        pp = (
          <span className="catalog-name">
            {`${item.name}(${item.resourceSum})`.length > 5 ? (
              <Tooltip
                placement="topLeft"
                title={`${item.name}(${item.resourceSum})`}
              >
                <span>{`${item.name}(${item.resourceSum})`}</span>
                
              
              </Tooltip>
            ) : (
              <span>{`${item.name}(${item.resourceSum})`} 
              
              </span>
              
            )}
            <Icon style={{ marginLeft: "10px" }} type="star" />
          </span>
        );
      }

      return (
        <TreeNode title={pp} key={item.id} dataRef={item} isLeaf={false}>
          {loop(item.pointList, "knowledge")}
        </TreeNode>
      );
    }
    return <TreeNode key={item.id} title={pp} dataRef={item} />;
  });
};

function Local({show,onRef}) {
    const [expandedKeys, setExpandedKeys] = useState([]);  //（受控）展开指定的树节点
    const [checkedKeys, setCheckedKeys] = useState([]);    //（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置 checkable 和 checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联
    const [selectedKeys, setSelectedKeys] = useState([]);  //（受控）设置选中的树节点
    const [autoExpandParent, setAutoExpandParent] = useState(true);  //autoExpandParent是否自动展开父节点
  
    const onExpand = (expandedKeys) => {
      console.log('onExpand', expandedKeys);   //点击折叠展开，合并
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
  
      setExpandedKeys(expandedKeys);
      setAutoExpandParent(false);
    };


    useImperativeHandle(onRef, () => ({

        check:onCheck

    }),[]);

    const onCheck = (checkedKeys) => {
      console.log('onCheck', checkedKeys);  //点击复选框触发
      setCheckedKeys(checkedKeys);
      show(checkedKeys);
    };
  
    
    const onSelect = (selectedKeys, info) => {
      console.log("onSelect", info); //点击内容触发
      setSelectedKeys(selectedKeys);
    };
   
    return (
      <>
      {/* <p>{JSON.stringify(checkedKeys)}</p> */}
       <Tree
      checkable    //添加复选框
      checkStrictly
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      // treeData={treeData}
      height={700}
  >
    {loop(data.result)}
    </Tree>
    </>
       
    )
}

export default forwardRef(Local);